<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>vue学习之{{name}}</h2>
  <button v-on:click="showInfo1">点我弹框</button>
  <button @click="showInfo2(66,$event)">点我弹框2,带参数：</button>

  <!--事件修饰符，prevent 阻止标签的默认事件，就不会跳转到指定网址-->
  <a href='http://www.baidu.com' @click.prevent="showInfo1">点我</a>
  <!--事件修饰符，stop 阻止冒泡事件，就不会跳连续两次出发-->
  <div @click="showInfo1">
    <button @click="showInfo1.stop">点我弹框stop 阻止冒泡事件</button>
  </div>
  <!--事件修饰符，once 阻止连续点击触发事件-->
  <button @click="showInfo1.once">点我弹框,once修饰符,只触发一次</button>
  <!--修饰符可以连续写-->


</div>

<script type="text/javascript">
  let showInfo1 = function (event1) {
    //阻止标签的默认事件
    // event1.preventDefault();
    //stop 阻止冒泡事件
    //event1.stopPropagation()
    alert(event1.target.innerHTML);
  }
  let showInfo2 = function (number, event1) {
    alert(event1.target.innerHTML + number);
  }

  const vm = new Vue({
    el: '#root',
    data: {
      name: 'click-event'
    },
    methods: {
      showInfo1,
      showInfo2
    }
  })

</script>

</body>
</html>
